<template>
<!--  <router-view></router-view>-->
<!--  <div>-->
<!--    <img src="../assets/logo.png" alt class="logo_img" />-->
<!--    <span>运动管理平台</span>-->
<!--  </div>-->
  <el-container>
    <el-header>欢迎来到茶园小区停车场

      <el-button type="info" @click="logout" active-text-color="#ffd04b">安全退出</el-button>
    </el-header>
    <el-footer >


      <el-button type="primary" @click="findmebycarnumber()" >个人信息</el-button>
      <el-button type="primary" @click="yuding()" >预定模块</el-button>
      <el-button type="primary" @click="showEditDialog()" >驶入停车场</el-button>
      <el-button type="primary" @click="goout()" >驶出停车场</el-button>
<!--      <li v-for="site in userlist">-->
<!--        {{ site.username }}-->
<!--      </li>-->


    </el-footer>

    <el-container>



    <el-main>
      <router-view></router-view>

      </el-main>
      <el-aside class="asi" >

     <h class="ggl">公告栏</h>




<div class="nqggl">


<ul>
  <li class="lil" v-for="item in kongxiannumber" :key="item">剩{{ item.name }}车位</li>
  </ul>
</div>
      </el-aside>
  </el-container>
    <!-- 修改用户对话框 -->
    <el-dialog title="模拟扫描用户信息" :visible.sync="editDialogVisible" width="50%" @colse="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="editForm.username" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="车牌号" prop="carnumber">
          <el-input v-model="editForm.carnumber" ></el-input>
        </el-form-item>
        <el-form-item label="停车位" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <!-- 邮箱 -->


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    </el-container>

</template>

<script>
  export default {
    created (){
      this.getnumber();
      this.getUserList();
      this.getmeanList();
      this.activePath = window.sessionStorage.getItem('activePath')

    },
    data(){


      return{
        //查询信息实体
        queryInfo:{
          query:"",//查询信息
          pageNum: 1,//当前页
          pageSize: 5,//每页最大数
        },
        cz:this.$route.query.username,
        user:[],
        carlist:[],
        meanlistqian:[],
        userlist:[],//用户列表
        kongxiannumber:[],
        total:0,//总记录数

        // 控制修改用户对话框显示/隐藏
        editDialogVisible:false,
        addDialogVisible: false,
        // 被激活的连接
        activePath: '/userqian',
        // 添加用户表单项
        addForm: {
          username:'',
          password:'',

          carnumber:'',
        },


        // 修改用户信息
        editForm:{},
        // 验证规则
        addFormRules:{
          // 添加用户表单验证规则
          username:[
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
          ],
          password:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 1, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
        // 修改用户表单验证规则
        editFormRules:{
          password:[
            // { required: true, message: "请输入密码", trigger: "blur" },
            // { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
          ],

        },
      }

    },
    methods:{
      logout () {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      async getUserList() {

        const { data: res } = await this.$http.get("txtqian");
        this.userlist = res.data;
        this.user=res.user;

      },

async getmeanList(){
  const { data: res } = await this.$http.get("meanqian");
  this.meanlistqian = res.data;
},
      async getFindCarList() {
        // 调用post请求
        const { data: res } = await this.$http.get("txtfindcarkong");
        this.carlist = res.data; // 将返回数据赋值
        // this.total = res.numbers; // 总个数
        // console.log(queryInfo);



      },
      async getnumber() {
        // 调用post请求
        const { data: res } = await this.$http.get("getnumber");
        this.kongxiannumber = res.data; // 将返回数据赋值
        // this.total = res.numbers; // 总个数
        console.log(res.data);




      },  async goout() {
        // 调用post请求
        const { data: res } = await this.$http.post(`goout?carnumber=${this.$route.query.carnumber}`);

        this.$message.success("使出停车场");




      },
      async findmebycarnumber(){

        // const { data: res } = await this.$http.post(
        //   `findmebycarnumber?carnumber=${this.$route.query.carnumber}`
        // );
        //this.user = res.data;
        this.$router.push({ path: "/meqian",query:{carnumber:this.$route.query.carnumber}});
       // this.$message.success(res.data);
       // this.$router.push({ path: "/firstmain",query:{username:res.user}});



      },
      async yuding(){

        // const { data: res } = await this.$http.post(
        //   `yuding?username=${this.$route.query.username}`
        // );
        //this.user = res.data;
        this.$router.push({ path: "/yudingqian",query:{carnumber:this.$route.query.carnumber}});
        // this.$message.success(res.data);
        // this.$router.push({ path: "/firstmain",query:{username:res.user}});



      },

      // 展示修改框
      async showEditDialog(){


        // if (res != "success") {
        // userinfo.state = !userinfo.state;
        // return this.$message.error("操作失败！！！");
        // }
        // this.$message.success("操作成功！！！");


        this.editDialogVisible = true;//编辑菜单开启
      },
      // 关闭窗口,重置信息
      editDialogClosed(){
        this.$refs.editFormRef.resetFields();
      },
      // 确认修改
      editUserInfo(){
        this.$refs.editFormRef.validate(async valid =>{//表单验证
          console.log(valid);
          if( !valid ) return;
          // 发起请求
          const {data:res} = await this.$http.put("editUserqianshiru",this.editForm);
          console.log(res);
          if (res != "success") return this.$message.error("操作失败！！！");
          this.$message.success("操作成功！！！");
          //隐藏
          this.editDialogVisible = false;
          this.getUserList();
        });
      },
    }

  }
</script>

<style scoped>
.lil{
  margin-top: 10px;
  width: 100px;
  height: 50px;
  list-style: none;
  margin-left: 50px;
}
.el-tag{
  font-size: 30px;

}
.right{
  background-color: #B3C0D1;
  width: 300px;
  height: 400px;
 position: absolute;
  left: 800px;
  float: left;
  text-align: center;
  font-size: 40px;
 color: blanchedalmond;
  background: url("../assets/11.png") no-repeat;

}
.el-aside {
  /*background-color: bisque;*/
  /*color:palevioletred;*/
  /*text-align: center;*/
  /*line-height: 200px;*/


}
.asi{
  width: 900px;
  margin-right: 100px;
  background: #42b983;
  background-color: burlywood;

}
.left{
  background-color: #B3C0D1;
  width: 300px;
  height: 500px;
  position: absolute;
  left: 100px;
}

  .el-header, .el-footer {
    height: 200px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    background-color: bisque;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 100px;
  }

  .el-main {
    background-color: #E9EEF3;
  height: 600px;
    /*position: relative;*/
    position: absolute;
    right: 0px;
   width: 1200px;
  }
  .el-gg{

    background-color: #B3C0D1;

  }
.ggl{
  color: palevioletred;
  font-size: 30px;
  height: 10px;
  /*background:url("../assets/11.jpg" );*/
  padding-right: 10px;

}
  .nqggl{
    margin-top: 10px;
    width: 300px;
    height: 300px;
    /*background:url("../assets/22.jpg" );*/
   color: deeppink;
    font-size: 20px;
    background-color: bisque;

  }

</style>
